{% extends "base/base.html" %}
{% load asset_filter %}
{% load bootstrap3 %}
{% load  static %}
{% block header-css %}

    <style type="text/css">
        .sort_both_png {
            background: url('/static/img/sort_both.png') no-repeat right 1px center;
            cursor: pointer;
        }

        .sort_asc_png {
            background: url('/static/img/sort_asc.png') no-repeat right 1px center;
            cursor: pointer;
        }

        .sort_desc_png {
            background: url('/static/img/sort_desc.png') no-repeat right 1px center;
            cursor: pointer;
        }


    </style>



{% endblock %}

{% block  title %}资产列表{% endblock %}



{% block page-content %}


    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12" id="split-right">

                <div class="ibox float-e-margins">

                    <div class="ibox-title">
                        <h5>资产列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form id="cha" class="form-horizontal" action="{% url 'assets:ecs-list' %}" method="GET">
                            {% csrf_token %}
                            <div class="row">

                                <div class="col-sm-2">
                                    <input class="form-control input-sm" type="text" name="hostname__icontains"
                                           id="hostname"
                                           placeholder="主机名" style=""/>
                                </div>

                                <div class="col-sm-2">
                                    <select class="input-sm form-control select2   inline" name="type" id="type">
                                        <option value="">主机类型</option>
                                        {% for i in  ''|ecs_type_choices %}

                                            <option value="{{ i.0 }}">{{ i.1 }}</option>

                                        {% endfor %}
                                    </select>


                                </div>

                                <div class="col-sm-2">

                                    <button type="submit" class="btn btn-sm btn-primary"> 搜索</button>
                                </div>
                            </div>
                        </form>
                        <br/>

                        <div class="table-responsive">



                            <form class="form-horizontal  "
                                  method="post">
                                {% csrf_token %}
                                <table class="table table-striped table-bordered table-hover dataTables-code">
                                    <thead>
                                    <tr>


                                        <th>主机名</th>
                                        <th>主机类型</th>

                                        <th>实例ID</th>
                                        <th>标签</th>
                                        <th>系统版本</th>
                                        <th>内网IP</th>

                                        <th  {% if request.GET.order_by == "-c_time" %}
                                            class="sort_asc_png" onclick="window.location.href='?order_by=c_time'"
                                        {% elif request.GET.order_by == "c_time" %}
                                            class="sort_desc_png"
                                            onclick="window.location.href='?order_by=-c_time'"
                                        {% else %}
                                            class="sort_both_png" onclick="window.location.href='?order_by=c_time'"
                                        {% endif %}>创建时间
                                        </th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for   row   in   ecs_list.object_list %}

                                        <tr class="gradeA" id="{{ row.id }}" name="{{ row.hostname }}">


                                            <td class="center">
                                                <div class="">{{ row.hostname }}</div>
                                            </td>
                                            <td class="center">
                                                <div class="">{{ row.get_type_display }}</div>
                                            </td>
                                            <td class="center">
                                                <div class="">{{ row.instance_id }}</div>
                                            </td>
                                            <td class="center">
                                                <div class="">{{ row.instance_name }}</div>
                                            </td>
                                            <td class="center">
                                                <div class="">{{ row.os_name }}</div>
                                            </td>
                                            <td class="center">
                                                <div class="">{{ row.private_ip }}</div>
                                            </td>
                                            <td class="center">
                                                <div class="">{{ row.c_time |  date:'Y-m-d' }}</div>
                                            </td>
                                            <td>
                                          {% if perms.assets.view_ecs %}
                                                    <a class="btn btn-success  btn-xs "
                                                       href="{% url  "assets:ecs-detail" pk=row.id %}">详情</a>
                                                {% endif %}
                                                {% if perms.assets.change_ecs %}
                                                    <a class="btn btn-primary  btn-xs "
                                                       href="{% url  "assets:ecs-update" pk=row.id %}">编辑</a>
                                                {% endif %}
                                                {% if perms.assets.delete_ecs %}
                                                    <a class="btn btn-danger  btn-xs ecs-delete"
                                                       href="#">删除</a>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>

                                </table>

                                             <div style="text-align:center;">

                                    <nav class="pagination">
                                        <li><a href="{% url "assets:ecs-list" %}?page=1">首页 </a></li>

                                        {% if ecs_list.has_previous %}
                                            <li class="long"><a
                                                    href="?{{ ecs_list.previous_page_number.querystring }}">上一页</a>
                                            </li>
                                        {% endif %}

                                        {% for page in ecs_list.pages %}
                                            {% if page %}
                                                {% ifequal page ecs_list.number %}
                                                    <li class="active"  ><a style="background-color: #E0E0E0" href="?{{ page.querystring }}">{{ page }}</a>
                                                    </li>
                                                {% else %}
                                                    <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a>
                                                    </li>
                                                {% endifequal %}
                                            {% else %}
                                                <li class="none"><a href="">...</a></li>
                                            {% endif %}
                                        {% endfor %}
                                        {% if ecs_list.has_next %}
                                            <li class="long"><a
                                                    href="?{{ ecs_list.next_page_number.querystring }}">下一页</a>
                                            </li>
                                        {% endif %}
                                        <li>
                                            <a href="{% url "assets:ecs-list" %}?page={{ ecs_list.paginator.num_pages }}">尾页 </a>
                                        </li>
                                        <li><span
                                                style="color: #0a0a0a">总: &nbsp;{{ ecs_list.paginator.num_pages }} 页</span>
                                        </li>
                                        <li><span
                                                style="color: #0a0a0a"> 数量: {{ ecs_list.paginator.count  }}</span>
                                        </li>
                                    </nav>
                                </div>


                            </form>


                        </div>

                    </div>


                </div>
            </div>
        </div>
    </div>





    {% block footer-js %}

        <script>
            window.onload = function () {   // 固定左边导航栏
                $(".assets").addClass("active");
                $(".ecs-list").addClass("active");
            };


            var filter_dict = {{ filter_dict | safe}};   // 搜索完之后，还能保存搜索项目
            $("#hostname").val(filter_dict['hostname__icontains']);
            $("#type").val(filter_dict['type']);


            $(function () {

                $(document).on('click', '.ecs-delete', function () {
                    var id = $(this).parent().parent().attr('id');
                    var name = $(this).parent().parent().attr('name');
                    swal({
                        title: "你确定删除",
                        text: name,
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        closeOnConfirm: false
                    }, function () {
                        $.ajax({
                            url: "{% url 'assets:ecs-delete' %}",
                            type: 'POST',
                            data: {'nid': id},
                            success: function (data) {
                                var obj = JSON.parse(data);
                                if (obj.status) {
                                    swal({title: "删除", text: "已成功删除", type: "success"}, function () {
                                        window.location.reload();
                                    })
                                } else {
                                    swal("错误", "删除" + "[ " + obj.error + " ]" + "遇到错误", "error");
                                }
                            }
                        });
                    });

                });


            });

        </script>
    {% endblock %}

{% endblock %}
